<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="(val,i) in list" :key="i">
        <router-link :to="'/shop?id='+val.id">
          <img
            class="mui-media-object mui-pull-left"
            :src="'https://elm.cangdu.org/img/'+val.image_path"
          />
          <div class="mui-media-body">
            <header>
              <h4>{{val.name}}</h4>
              <ul class="special" v-for="(item, index) in val.supports" :key="index">
                <li>{{item.icon_name}}</li>
              </ul>
            </header>
            <h5>
              <h6>
                评分:
                <span class="score">{{val.rating}}</span>
              </h6>
              <h6 class="sv">
                月销售:
                <span class="salesVolume">{{val.recent_order_num}}</span>单
              </h6>
              <h6 class="mode">
                <span class="song">蜂鸟专送</span>
                <span class="da">准时达</span>
              </h6>
            </h5>
            <h5>
              <h6>
                ￥
                <span>20</span>起送/配送费约￥
                <span>5</span>
              </h6>

              <h6 class="mode">
                <span>{{val.distance}}/</span>
                <span class="requiredTame" v-text="val.order_lead_time"></span>
              </h6>
            </h5>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ['list'],
  data() {
    return {
      ip: window.location.host.split(':')[0] + ':3000/'
    }
  }
}
</script>
<style scoped>
a {
  text-decoration: none !important;
}
.mui-table-view-cell > a:not(.mui-btn).mui-active {
  background-color: #ffffff;
}
.mui-table-view-cell {
  margin: 0;
  padding: 0;
}
.mui-table-view-cell > a:not(.mui-btn) {
  margin: 0;
  padding: 3vw;
  position: relative;
}
.mui-table-view .mui-media-object {
  height: 20vw;
  width: 20vw;
  max-width: none;
}
header {
  display: flex;
  height: 6vw;
}
h4 {
  flex: 6;
  font-size: 4vw;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.special > li {
  background-color: yellow;
  border-radius: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 3vw;
  text-align: center;
  color: #aaa;
  float: right;
}
h5 {
  display: flex;
  height: 5vw;
  margin: 2vw 0 0 0;
}
h6 {
  font-size: 3vw;
}
.score {
  margin-right: 10px;
  color: red;
  font-size: inherit;
}
.salesVolume {
  color: red;
  font-size: inherit;
}
.song {
  font-size: inherit;
  background-color: #26a2ff;
  border: 1px #26a2ff solid;
  color: white;
  height: 4vw;
  padding: 2px;
  text-align: center;
  border-radius: 3px;
}
.da {
  font-size: inherit;
  background-color: white;
  border: 1px #26a2ff solid;
  color: #26a2ff;
  height: 4vw;
  padding: 2px;
  text-align: center;
  border-radius: 3px;
}
.mode {
  position: absolute;
  right: 3vw;
}
.requiredTame {
  color: #26a2ff;
}
</style>